<template>
  <el-container>
    <!-- 侧边栏部分 -->
    <el-aside width="200">
      <h1 class="logo" style="height:60px">
      </h1>
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        :router="true"
        @open="handleOpen"
        @close="handleClose" 
        :collapse="isCollapse"
      >
      <!-- 引入插件侧边栏渲染 -->
       <!-- <qf-sub-menu :sideMenu="$store.state.sideMenu"></qf-sub-menu>-->
       <!-- <sideMenu :sideMenu="$store.state.sideMenu"></sideMenu> -->
       <sub-menu :sideMenu="$store.state.sideMenu"></sub-menu>
      </el-menu> 
    </el-aside>
    <el-container>
      <!-- header 部分 -->
      <el-header>
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col :span="6">
            <div class="icon" >
              <!-- el-icon-s-unfold -->
              <!-- 点击按钮 侧边栏收缩 -->
              <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" @click="isCollapse=!isCollapse"></i>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">管理系统</div>
          </el-col>
          <el-col :span="6">
            <b class="grid-content bg-purple">欢迎:<span class="roleName">{{$store.state.userInfo.roleName}}</span> </b>
            
            <b class="quit">
              <a href="#" @click="quit">退出</a>
            </b>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <!-- header部分 结束 -->
      <!-- main 主体部分 开始 -->
      <el-main>
        <div class="breadCrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{path:'/welcome'}">首页</el-breadcrumb-item>
            <el-breadcrumb-item   v-for="item in $store.state.breadCrumb" :to="{ name:item.name }">{{item.meta.name}}</el-breadcrumb-item>
            
          </el-breadcrumb>
        </div>
          <router-view></router-view>
      </el-main>
    </el-container>
   
  </el-container>
</template>

<script>
// import sideMenu from 'components/sideMenu'
import { getlog } from "@/api";
export default {
  beforeCreate() {
    getlog().then((res) => {
      console.log(res);
    });
  },
  // components:{
  //   sideMenu
  // },
//   侧边菜单
 data() {
      return {
        isCollapse: false,
       
      }
    },
    methods: {
      // 退出登录
      quit(e){
        // 1跳转到登录页面
        // 2清空token
        // 3刷新页面 目的:因为addRoutes之后 数据编译无法清空 会导致不同的角色菜单混乱
        // 4 一定注意:
        e.preventDefault()
        this.$router.push('/login')
        localStorage.removeItem('qq-token')
        localStorage.removeItem('qq-userInfo')
        localStorage.removeItem('qq-permission')
        location.reload()
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
};
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

.el-container {
  margin-bottom: 40px;
  height: 100%;
}

.icon{
  cursor: pointer;
  font-size: 40px;
  text-align: left;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/* 侧边菜单 */
 .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  .roleName{
    margin: 5px;
    color:#fff;
    font-size: 25px;
    font-weight: bold;
  }
 .el-main .breadCrumb{
    margin-bottom: 10px;
  }
</style>